<template>
  <!--             :scroll="{ x: 1500 }" -->
  <a-table :columns="this.columns"
           ref="myTable"
           :data-source="this.data"
           :row-selection="this.rowSelection"
           row-key="issueId"
           expand-column-width="140"
           :custom-row="onCustomRow"
           :pagination="false" bordered>
    <template #bodyCell="{ column,record }">

<!--      <template v-if="column.key === 'operation'"><a>action</a></template>-->
      <template v-if="column.key === 'priority'">
       <span>
          <a-tag
              :key="record.priority"
              :color="record.priority === 'danger' ? '#d63939' : record.priority === 'warning' ? '#f76707' :record.priority === 'success' ? '#f59f00' :'#f7ecfa' ">
              {{
              record.priority === 'danger' ? '紧急' : record.priority === 'warning' ? '稍急' : record.priority === 'success' ? '不急' : '加急'
            }}
          </a-tag>
        </span>
      </template>
      <template v-if="column.key === 'status'">
       <span>
          <a-tag
              :color="swtichStatusColor(record.status)"
              :key="record.status">
            {{ swtichStatusText(record.status) }}
            <!--              {{record.priority === 'danger'?'紧急': record.priority === 'warning'?'稍急': record.priority==='success'? '不急':'加急'}}-->
          </a-tag>
        </span>
      </template>
    </template>
    <template #summary>
      <a-table-summary :fixed="this.fixedTop ? 'top' : 'bottom'">
        <!--          <a-table-summary-row>-->
        <!--            <a-table-summary-cell :index="0" :col-span="2">-->
        <!--            </a-table-summary-cell>-->
        <!--            <a-table-summary-cell :index="2" :col-span="8">Scroll Context</a-table-summary-cell>-->
        <!--            <a-table-summary-cell :index="10">Fix Right</a-table-summary-cell>-->
        <!--          </a-table-summary-row>-->
      </a-table-summary>
    </template>
  </a-table>
  <Pagination
      v-model="this.current"
      :total="this.totalCount"
      show-size-changer
      :page-size="this.pageSize"
      @onShowSizeChange="onShowSizeChange"
  >
  </Pagination>

</template>

<script>

import {mapActions, mapGetters} from "vuex";
import {swtichStatusColor, swtichStatusText} from "@/utils/project_core.js";
import Pagination from "@/views/components/Pagination.vue";
import sys from "@/store/modules/sys.js";
import {delIssue, getIssuesList} from "@/api/issues.js";
import EventBus, {DEL_ISSUES_BTN, ISSUES_LIST_INVOKE} from '@/utils/eventBus'

export default {
  name: "TasksTable",
  components: {Pagination},
  data() {
    return {
      fixedTop: true,
      columns: [],
      rowSelection: {},
      data: [],
      selectedRowPks:[],
      pagination: {
        current: 1,
        pageSize: 10,
        totalCount: 500
      }
    }
  },
  methods: {
    ...mapActions([
      'issuesDataCache',
      'storeSetPageNumSize',
      'storeSetTotalCount',
        'issueChange'
    ]),
    async getIssuesList() {
      let params = {
        'projectId': this.current_pid,
        'pageNum': this.current,
        'pageSize': this.pageSize,
        'searchParam': this.searchParam
      }
      console.log('params:', params)
      let result = await getIssuesList(params);
      console.log('result: ', result)
      if (result.status == 200) {
        this.storeSetTotalCount(result.data.total)
        this.totalCount = result.data.total
        this.data = result.data.data
      }
    },
    swtichStatusText,
    swtichStatusColor,
    // 定义自定义行渲染函数
    onCustomRow(record) {
      return {
        onClick: (event) => {
          // 点击行时触发的事件处理逻辑
          console.log('Clicked row with ID:', record.id);
          if (record.id) {
            this.$router.push('/issueDetail?pk=' + record.id)
            this.issueChange(record.id)
          } else {
            // this.$router.push('/issueDetail?pk=' + record.id)
          }
        },
      };
    },
    // delIssues(){
    //   console.log('delIssues---')
    //   // this.$refs.table && this.$nextTick(() => {
    //     // 触发表格重新渲染
    //   console.log('this.$refs.myTable:',this.$refs.myTable)
    //     location.reload()
    //   // });
    // },
    onShowSizeChange(current, pageSize) {
      console.log('onShowSizeChange')
      console.log(current, pageSize);
      this.pagination.current = current
      this.pagination.pageSize = pageSize;
      this.storeSetPageNumSize({pageNum: current, pageSize: pageSize})
      //改变完 重新渲染数据
      this.getIssuesList()
    },

  },
  created() {
    this.getIssuesList()
    // this.data = this.current_issues_data
    console.log('data in tasksTable:', this.data)
    this.columns = [
      {
        title: '#',
        width: 50,
        dataIndex: 'issueId',
        key: 'issueId',
        // fixed: 'left',
      },
      {
        title: '标题',
        width: 590,
        dataIndex: 'subject',
        key: 'subject',
      },
      {
        title: '权重',
        width: 90,
        dataIndex: 'priority',
        key: 'priority',
        // fixed: 'right',
      },
      {
        title: '状态',
        width: 70,
        dataIndex: 'status',
        key: 'status',
        // fixed: 'right',
      },

      // {
      //   title: 'Column 7',
      //   dataIndex: 'address',
      //   key: '7',
      //   width: 150,
      // },
      // { title: 'Column 8', dataIndex: 'address', key: '8' },
      {
        title: '创建时间',
        width: 240,
        dataIndex: 'createDatetime',
        key: 'createDatetime',
        // fixed: 'right',
      },
      {
        title: '更新时间',
        width: 240,
        dataIndex: 'latestUpdateDatetime',
        key: 'latestUpdateDatetime',
        // fixed: 'right',
      },
      // {
      //   title: 'Action',
      //   key: 'operation',
      //   // fixed: 'right',
      //   width: 100,
      // },
    ];
    this.rowSelection = {
      checkStrictly: false,
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        this.selectedRowPks = selectedRows.map(row=>row.id)
        console.log('this.selectedRowPks:',this.selectedRowPks)
        if (this.selectedRowPks.length > 0){
          EventBus.$emit(DEL_ISSUES_BTN, {'show':true,'delIds':this.selectedRowPks})
        }else{
          EventBus.$emit(DEL_ISSUES_BTN,{'show':false,'delIds':[]})
        }
      },
      onSelect: (record, selected, selectedRows) => {
        console.log('onSelect ', record, selected, selectedRows);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        console.log('onSelectAll ', selected, selectedRows, changeRows);
      },
    }
  },
  computed: {
    ...mapGetters([
      'issues_data',
      'current_pid',
      'totalCount',
      'current',
      'pageSize'
    ])
  },
  mounted() {
    EventBus.$on(ISSUES_LIST_INVOKE, (param) => {
      console.log('param on eventBus:', param)
      this.searchParam = param
      this.getIssuesList()
    })
  },
  watch: {
    // selectedRowPks: function (val) {
    //   console.log('watch selectedRowPks change size:', val.length)
    //   if (val) {
    //     this.data = val
    //   }
    // }
  },
}
</script>

<style scoped>
#components-table-demo-summary tfoot th,
#components-table-demo-summary tfoot td {
  background: #fafafa;
}

[data-theme='dark'] #components-table-demo-summary tfoot th,
[data-theme='dark'] #components-table-demo-summary tfoot td {
  background: #1d1d1d;
}
</style>
